/* eslint-disable no-unused-vars */
<template>
  <div>
    <h1>Div 高度拖拽效果实现</h1>
    <div id="eagleMapContainer" style="border: 1px solid red;overflow-y: auto;" title="">
      <div id="tz" @mousedown="dragEagle" style="border: 1px solid blue;">
        <div title="拖动调整大小" id="move_tz" style="border: 1px solid green;"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'eagleMap',
  data () {
    return {}
  },
  methods: {
    dragEagle: function (e) {
      var targetDiv = document.getElementById('eagleMapContainer')
      // 得到点击时该地图容器的宽高：
      var targetDivHeight = targetDiv.offsetHeight
      var startX = e.clientX
      var startY = e.clientY
      document.onmousemove = function (e) {
        e.preventDefault()
        // 得到鼠标拖动的宽高距离：取绝对值
        var distY = Math.abs(e.clientY - startY)
        // 往上方拖动：
        if (e.clientY < startY) {
          targetDiv.style.height = targetDivHeight + distY + 'px'
        }
        // 往下方拖动：
        if (e.clientX < startX && e.clientY > startY) {
          targetDiv.style.height = (targetDivHeight - distY) + 'px'
        }
        if (parseInt(targetDiv.style.height) >= 300) {
          targetDiv.style.height = 300 + 'px'
        }
        if (parseInt(targetDiv.style.height) <= 150) {
          targetDiv.style.height = 150 + 'px'
        }
      }
      document.onmouseup = function () {
        document.onmousemove = null
      }
    }
  }
}
</script>

<style scoped>
  #eagleMapContainer {
    position: absolute;
    left: 13%;
    bottom: 10px;
    z-index: 200;
    overflow: hidden;
    visibility: visible;
    width: 200px;
    height: 200px;
  }

  #tz {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 27px;
    height: 20px;
    cursor: ne-resize;
    z-index: 200001;
    background-image: url("");

  }

  #tz:hover {
    background-color: #666;
  }

  #move_tz {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 27px;
    height: 20px;
    cursor: ne-resize;
    z-index: 100;
    background-image: url("");
    background-position: 0px 0px;
  }
</style>
